<template>
  <div class="home">
    <div class='check'>
      <p class='top'>欢迎使用<i>{{title}}</i></p>
      <p class='sex'>您的性别</p>
      <div class='box'>
        <div 
          class='imgbox' 
          @click="handleSexClick('男')"
          :style="{ border: selectedSexBorder === '男'? '3px solid #007BFF' : '3px solid #75F9FD' }"
        >
          <img :src="nan" class='seximg'>男
        </div>
        <div 
          class='imgboxs' 
          @click="handleSexClick('女')"
          :style="{ border: selectedSexBorder === '女'? '3px solid #007BFF' : '3px solid #CCF783' }"
        >
          <img :src="nv" class='seximg'>女
        </div>
      </div>
      <div class='kgbox'>
        <p class='weight'>您的体重</p>
        <input type="number" v-model="weight" placeholder="请输入" class='kg'/>
        <span>Kg</span>
      </div>
      <div class="button-container">
        <span @click="handleEnter" class='but'>进入爱韵动</span>
        <div class="runner" :class="{ 'run-animation': isRunning }"></div>
      </div>
    </div>
    
    <!-- 轻提示组件 -->
    <div v-if="showToast" class="toast-container">
      <div class="toast-message">{{ toastMessage }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const title = ref('爱韵动')
const nan = '../男.png' 
const nv = '../女.png' 
const selectedSex = ref('')
const weight = ref('')
const selectedSexBorder = ref('')
const showToast = ref(false)
const toastMessage = ref('')
const isRunning = ref(false)
let toastTimer: number | null = null

const router = useRouter()

const handleSexClick = (sex: string) => {
  selectedSex.value = sex
  selectedSexBorder.value = sex
}

const handleEnter = () => {
  if (!selectedSex.value) {
    showToastMessage('请选择您的性别')
    return
  }
  
  if (!weight.value) {
    showToastMessage('请输入您的体重')
    return
  }
  
  isRunning.value = true // 触发跑步动画
  
  setTimeout(() => {
    localStorage.setItem('userInfo', JSON.stringify({
      sex: selectedSex.value,
      weight: weight.value
    }))
    
    router.push('/home')
    console.log('用户选择的性别:', selectedSex.value)
    console.log('用户输入的体重:', weight.value)
  }, 800) // 等待动画完成后跳转
}

const showToastMessage = (message: string) => {
  toastMessage.value = message
  showToast.value = true
  
  if (toastTimer) clearTimeout(toastTimer)
  toastTimer = window.setTimeout(() => {
    showToast.value = false
    toastTimer = null
  }, 3000)
}

// 初始化时播放一次动画
onMounted(() => {
  setTimeout(() => {
    isRunning.value = true
    setTimeout(() => {
      isRunning.value = false
    }, 800)
  }, 500)
})
</script>

<style scoped>
.home {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom, hsl(182, 100.00%, 83.70%) 0%, white 100%);
  position: relative; 
}
.check{
  margin-top: 20vh;
  line-height: 6vh;
  position: relative; 
}
.top{
  font-size: 30px;
  width: 80%;
  margin: 0 auto;
  text-align: center;
}
.top i{
  font-weight: 700;
}
.sex{
  margin: 2vh 0vh;
  font-size: 20px;
  margin: 0 auto;
  width: 80%;
  text-align: center;
}
.imgbox{
  width: 40%;
  height: 10vh;
  background-color: #75F9FD;
  border-radius: 50px;
  padding: 2%;
  border: 1px solid white;
  text-align: center;
}
.imgboxs{
  width: 40%;
  height: 10vh;
  background-color: #CCF783;
  border-radius: 50px;
  padding: 2%;
  text-align: center;
}
.seximg{
  width: 100%;
  padding: 1%;
}
.box{
  display: flex;
  width: 60%;
  justify-content: space-between;
  margin: 0 auto;
  margin-bottom: 10vh;
}
.weight {
  margin: 2vh 0;
  font-size: 20px;
  text-align: center;
  width: 80%;
  margin: 0 auto;
}
.kgbox{
  margin-top: 20vh;
  line-height: 6vh;
  width: 80%;
  margin: 0 auto;
  text-align: center;
}
.toast-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  padding: 12px 24px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 8px;
  font-size: 16px;
  text-align: center;
}
.toast-message {
  margin: 0;
}
.kg{
  margin: 0 auto;
  width: 50%;
  padding: 0% 3%;
  border-radius: 50px;
  border: 1px solid #ccc;
  text-align: center;
  font-size: 16px;
}
.but{
  padding: 0% 3%;
  border: none;
  position: absolute;
  left: 70%;
  transform: translateX(-50%);
  margin-top: 2vh;
  font-size: 16px;
  color: #007BFF;
  cursor: pointer;
}

/* 新增：按钮容器样式 */
.button-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4vh;
}

/* 新增：跑步小人样式 */
.runner {
  position: relative;
  width: 30px;
  height: 40px;
  margin-left: 15px;
  display: inline-block;
}

/* 跑步小人基本形状 */
.runner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background-color: #007BFF;
  border-radius: 50%;
  z-index: 2;
}

.runner::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 20px;
  background-color: #007BFF;
  border-radius: 4px;
  z-index: 1;
}

/* 跑步动画 */
@keyframes run {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes moveForward {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(20px);
  }
}

/* 跑步动画状态 */
.run-animation {
  animation: run 0.3s linear infinite, moveForward 0.8s linear forwards;
}

/* 跑步小人的腿 */
.runner .left-leg,
.runner .right-leg {
  position: absolute;
  bottom: 0;
  width: 6px;
  height: 12px;
  background-color: #007BFF;
  border-radius: 3px;
}

.runner .left-leg {
  left: 8px;
}

.runner .right-leg {
  right: 8px;
}

/* 跑步动画中腿部动作 */
.run-animation .left-leg {
  animation: leftLeg 0.3s linear infinite;
  transform-origin: top center;
}

.run-animation .right-leg {
  animation: rightLeg 0.3s linear infinite;
  transform-origin: top center;
}

@keyframes leftLeg {
  0%, 100% {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(30deg);
  }
}

@keyframes rightLeg {
  0%, 100% {
    transform: rotate(30deg);
  }
  50% {
    transform: rotate(-30deg);
  }
}
</style>